<template>
  <div
    class="w-full h-full bg-cover bg-center bg-no-repeat relative"
    :style="{ backgroundImage: `url(${bgImage})`, backgroundSize: '100% 100%' }"
  >
    <div
      :class="[titleSize == '' ? 'text-xs 2k:text-sm' : titleSize]"
      class="absolute font-bold mt-1"
    >&#12288{{ title || '' }}</div>
    <div
      class="w-full mx-auto px-4 sm:px-6 lg:px-8 h-full min-h-full py-8 flex justify-between items-center"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>

interface Props {
  title?: string,
  bgImage?: string
  titleSize?: string,
}

const props = withDefaults(defineProps<Props>(), {
  bgImage: 'border.png',
  titleSize: '',
});
</script>
